import { echartsConfig } from '@/echartsConfig/basicLineConfig'
import { Button, Carousel, Col, Row } from 'antd'
import React from 'react'
import { FC } from 'react'
import Chart from './Chart'
import IconFont from './IconFont'
import styled from './index.module.scss'
import SmallCard from './SmallCart'
import drawing from '@/assets/images/drawing.svg'
import MiddleCard from './MiddleCard'
const Helloworld: FC = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <div className={`container`}>
        <Row>
          <Col xxl={16} xl={24}>
            <Row>
              <Col xl={12} lg={24} md={24}>
                <MiddleCard>
                  {/* <Chart id={'xefg3s2'} config={echartsConfig} width='100%' height={154} /> */}
                  <Carousel autoplay dotPosition='top'>
                    <div>
                      <h3>1</h3>
                    </div>
                    <div>
                      <h3>2</h3>
                    </div>
                    <div>
                      <h3>3</h3>
                    </div>
                    <div>
                      <h3>4</h3>
                    </div>
                  </Carousel>
                </MiddleCard>
              </Col>
              <Col xl={12} lg={24} md={24}>
                <div className={`${styled.card} ${styled.mrb40}`}>
                  <div className={styled.cardItem}>
                    <div className={styled.title}>
                      <IconFont type='icon-qicheqianlian-' className={styled.icon} />
                      <div className={styled.header}>
                        <span className={styled.titleh3}>Orders</span>
                        <span className={styled.headerContent}>step1 -Sep 16 2020</span>
                      </div>
                    </div>
                    <Chart id={'xefg3s21'} config={echartsConfig} width='100%' height={154} />
                  </div>
                </div>
              </Col>
            </Row>
            <Row>
              <Col xl={12} lg={24} md={24}>
                <SmallCard iconType='icon-qicheqianlian-' title='Orders' content='step1 -Sep 16 2020'>
                  <Chart id={'xefg3s24'} config={echartsConfig} width='100%' height={154} />
                </SmallCard>
              </Col>
              <Col xl={12} lg={24} md={24}>
                <div className={`${styled.card} ${styled.mrb40}`}>
                  <div className={styled.cardItem}>
                    <div className={styled.title}>
                      <IconFont type='icon-qicheqianlian-' className={styled.icon} />
                      <div className={styled.header}>
                        <span className={styled.titleh3}>Orders</span>
                        <span className={styled.headerContent}>step1 -Sep 16 2020</span>
                      </div>
                    </div>
                    <Chart id={'xefg3s216'} config={echartsConfig} width='100%' height={154} />
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
          <Col span={24} xxl={8} xl={24}>
            <div className={`${styled.card}`}>
              <div className={styled.cardItem}>
                <div className={styled.title}>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      justifyContent: 'center',
                      alignItems: 'center',
                      width: 300,
                    }}
                  >
                    <span
                      style={{
                        color: '#3f4254',
                        fontWeight: 700,
                        fontSize: '1.5rem',
                        width: '100%',
                        textAlign: 'center',
                      }}
                    >
                      Kickstart <br /> Mobile Application
                    </span>
                    <span
                      style={{
                        color: '#b5b5c3',
                        fontWeight: 500,
                        fontSize: '1.075rem',
                        width: '100%',
                        textAlign: 'center',
                        marginTop: 20,
                      }}
                    >
                      Outlines keep you honest. They stoping you from amazing poorly about drive
                    </span>
                  </div>
                </div>
                <div className={styled.center}>
                  <Button type='primary' shape='round'>
                    Create App
                  </Button>
                </div>
                <div className={styled.center} style={{ marginTop: 97, marginBottom: 20 }}>
                  <img src={drawing} style={{ width: 321, height: 196 }} />
                </div>
                {/* <Chart id={'xefg3s22'} config={echartsConfig} width='100%' height={214} /> */}
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default Helloworld
